<template>
  <uv-popup ref="popupRef" round="20rpx" bgColor="#0b204c">
    <view class="popup-main">
      <view class="popup-header" v-if="title">{{ title }}</view>

      <view class="popup-body">
        <view class="popup-content" :style="{ textAlign: align }">{{ content }}</view>
      </view>

      <view class="popup-footer">
        <view class="cancel-button" v-if="cancelText" @click="handleCancel">{{ cancelText }}</view>
        <view class="confirm-button" @click="handleConfirm">{{ confirmText }}</view>
      </view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  name: "ConfirmPopup",
  props: {
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    cancelText: {
      type: String,
      default: "",
    },
    confirmText: {
      type: String,
      default: "",
    },
    align: {
      type: String,
      default: "center",
    },
    async: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.popupRef.open();
    },
    close() {
      this.$refs.popupRef.close();
    },
    handleCancel() {
      this.$emit("cancel");
      this.close();
    },
    handleConfirm() {
      this.$emit("confirm");
      if (!this.async) {
        this.close();
      }
    },
  },
};
</script>

<style scoped>
.popup-main {
  width: 510rpx;
}
.popup-header {
  font-style: 32rpx;
  color: #fff;
  text-align: center;
  padding: 30rpx 0;
}
.popup-body {
  color: #fff;
  min-height: 156rpx;
  display: flex;
  align-items: center;
  font-style: 28rpx;
}
.popup-content {
  flex: 1;
}
.popup-footer {
  display: flex;
  height: 68rpx;
  border-top: 2rpx solid rgba(255, 255, 255, 0.2);
}
.cancel-button,
.confirm-button {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: 24rpx;
}
.cancel-button {
  color: #ccc;
  border-right: 2rpx solid rgba(255, 255, 255, 0.2);
}
.confirm-button {
  color: #4f7afd;
}
</style>
